<!--
 * @Des: 语音识别弹窗
 * @Author:  guqzhou
 -->
<template>
    <nut-popup :style="{ padding: '10px 20px 20px', borderRadius: '10px' }" v-model:visible="visibleShow">
        <view class="record">
            <view class="record-title">语音识别</view>
            <view class="prompt-loader">
                <view class="em" v-for="(_, index) in 15" :key="index"></view>
            </view>
            <view class="record-content">说出姓名、电话和详细地址</view>
            <button class="cu-btn round sh-white-color theme-bg margin-t30" @click="onFinish">停止识别</button>
        </view>
    </nut-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const visibleShow = ref(false);
const emit = defineEmits<{
    (e: "onFinish"): void
}>()

/**
 * @function 完成录音
 * */
const onFinish = () => {
    emit('onFinish')
}

/**
 * @function 打开弹窗
 * */
 const onOpen = () => {
    visibleShow.value = true
}

/**
 * @function 关闭弹窗
 * */
const onClose = () => {
    visibleShow.value = false
}

defineExpose({
    onOpen,
    onClose
})

</script>

<style lang="scss">
.record {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .record-title {
        font-size: 34px;
        font-weight: bold;
    }

    .record-content {
        margin-top: 20px;
        text-align: center;
        // display: flex;
        // flex-wrap: nowrap;
        width: 400px;
        font-size: 28px;
        color: #999;
    }

    .sh-white-color {
        color: #FFF;
    }

    .prompt-loader {
        margin-top: 40px;
        padding: 10px;
        width: 96px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .prompt-loader .em {
        display: block;
        background: #0966FF;
        width: 2px;
        height: 10%;
        margin-right: 2.5px;
        float: left;
        opacity: 0.8;
    }

    .prompt-loader .em:last-child {
        margin-right: 0px;
    }

    .prompt-loader .em:nth-child(1) {
        animation: load 2.5s 1.4s infinite linear;
    }

    .prompt-loader .em:nth-child(2) {
        animation: load 2.5s 1.2s infinite linear;
    }

    .prompt-loader .em:nth-child(3) {
        animation: load 2.5s 1s infinite linear;
    }

    .prompt-loader .em:nth-child(4) {
        animation: load 2.5s 0.8s infinite linear;
    }

    .prompt-loader .em:nth-child(5) {
        animation: load 2.5s 0.6s infinite linear;
    }

    .prompt-loader .em:nth-child(6) {
        animation: load 2.5s 0.4s infinite linear;
    }

    .prompt-loader .em:nth-child(7) {
        animation: load 2.5s 0.2s infinite linear;
    }

    .prompt-loader .em:nth-child(8) {
        animation: load 2.5s 0s infinite linear;
    }

    .prompt-loader .em:nth-child(9) {
        animation: load 2.5s 0.2s infinite linear;
    }

    .prompt-loader .em:nth-child(10) {
        animation: load 2.5s 0.4s infinite linear;
    }

    .prompt-loader .em:nth-child(11) {
        animation: load 2.5s 0.6s infinite linear;
    }

    .prompt-loader .em:nth-child(12) {
        animation: load 2.5s 0.8s infinite linear;
    }

    .prompt-loader .em:nth-child(13) {
        animation: load 2.5s 1s infinite linear;
    }

    .prompt-loader .em:nth-child(14) {
        animation: load 2.5s 1.2s infinite linear;
    }

    .prompt-loader .em:nth-child(15) {
        animation: load 2.5s 1.4s infinite linear;
    }

    @keyframes load {
        0% {
            height: 10%;
        }

        50% {
            height: 100%;
        }

        100% {
            height: 10%;
        }
    }

    .prompt-layer-2 {
        top: -40px;
    }

    .prompt-layer-2 .text {
        color: rgba(0, 0, 0, 1);
        font-size: 12px;
    }
}</style>
